<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>
		</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			.list {
				width: 300px;
				margin: 0px auto;
				height: 500px;
			}

			a {
				border-radius: 5px;
				text-decoration: none;
				display: block;
				height: 30px;
				width: 100%;
				position: relative;
				color: #000;
				font-size: 13px;
				background: #fff;
				line-height: 30px;
				border-bottom: 1px solid #dedede;
				/* text-align: center; */
				padding-left: 50px;
				box-sizing: border-box;

			}

			li {
				list-style: none;
			}

			.t2,
			.t3,
			.t4,
			.t5 {
				display: none;
			}

			i {
				width: 16px;
				height: 16px;
				position: absolute;
				top: 8px;
				left: 15px;
				/* padding:7px 0px; */
				display: inline-block;
				background: url(img/leftJia.png) no-repeat;
			}

			.current {
				background: #ccc;
				font-size: 16px;
			}

			.t2,
			.t3,
			.t4,
			.t5 {
				padding-left: 20px;
			}
		</style>
	</head>

	<body>

		<div class="list">
			<!-- <ul class='t1'>
				<li>
					<a href="javascript:;" title="1" class="buttn"><i></i>一级菜单</a>
					<ul class='t2'>
						<li>
							<a href="javascript:;" title="1" class="butt"><i></i>二级菜单</a>
							<ul class='t3'>
								<li>
									<a href="javascript:;" title="1" class="butt"><i></i>三级菜单</a>
									<ul class='t4'>
										<li><a href="javascript:;">四级菜单</a> </li>
										<li><a href="javascript:;">四级菜单</a> </li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>			
			</ul> -->
		</div>
	</body>
	<script src="./js/jquery.min.js"></script>
	<script>
		$(function() {

			$.ajax({
				type: "GET",
				url: "./mock/data.json",
				async: false,
				success: function(res) {
					// console.log(JSON.stringify(res.rows));
					var html1 = '<ul class="t1">';
					res.rows.forEach((item1, i) => {
						var h1 = '<li><a href="javascript:;" title="1" class="buttn"><i></i>' + item1.name + '</a><ul class="t2">';
						if (item1.subTbTeamsList) {
							item1.subTbTeamsList.forEach((item2, i) => {
								var h2 = '<li><a href="javascript:;" title="1" class="butt"><i></i>' + item2.name +
									'</a><ul class="t3">';
								if (item2.subTbTeamsList) {
									item2.subTbTeamsList.forEach((item3, t) => {
										var h3 = '<li><a href="javascript:;" title="1" class="butt"><i></i>' + item3.name +
											'</a><ul class="t4">';
										if (item3.tbmList) {
											item3.tbmList.forEach((item4, i) => {
												// console.log(item4);
												var h4 = '<li><a href="javascript:;" title="1" >' + item4.name + '</a>';
												h3 = h3 + h4 + '</li>';
											})
										}
										if (item3.subTbTeamsList) {
											item3.subTbTeamsList.forEach((item4, i) => {
												// console.log(item4);
												var h4 = '<li><a href="javascript:;" title="1" class="butt"><i></i>' + item4.name +
													'</a><ul class="t5">';

												if (item4.tbmList) {
													item4.tbmList.forEach((item5, i) => {
														var h5 = '<li><a href="javascript:;" title="1">' + item5.name + '</a>';
														h4 = h4 + h5 + '</li>';
													})
												}
												h3 = h3 + h4 + '</ul></li>';
											})

										}
										h2 = h2 + h3 + '</ul></li>';
									})
								}
								if (item2.tbmList) {
									item2.tbmList.forEach((item3) => {
										var h3 = '<li><a href="javascript:;" title="1" >' + item3.name + '</a><ul class="t4">';
										h2 = h2 + h3 + '</ul></li>';
									})
								}
								h1 = h1 + h2 + '</ul></li>';
							})
						}
						if (item1.tbmList) {
							item1.tbmList.forEach((item2, i) => {
								var h2 = '<li><a href="javascript:;" title="1">' + item2.name + '</a><ul class="t3">';
								h1 = h1 + h2 + '</ul></li>';
							})

						}
						html1 = html1 + h1 + '</ul></li>';
					})
					var ht = html1 + '</ul>';
					console.log(ht);
					$(".list").append(ht);
				},
				err: function(e) {
					console.log(e);
				}
			})

			$(".buttn").click(function() {
				sum1($(this), $(this).attr('title'));
			})
			$(".butt").click(function() {
				sum1($(this), $(this).attr('title'));
			})
		})

		function sum1(e, h) {
			e.attr("title", parseInt(e.attr('title')) + 1);
			// console.log(h);
			//	e.parent().siblings().children('a').removeClass("current");
			e.parent().children("ul").toggle(500);
			if (h % 2 == 1) {
				e.children('i').css({
					'background-image': "url(img/leftJian.png)"
				});
				e.addClass("current");
				e.parent().siblings().children("ul").hide(500);
				e.parent().siblings().children('a').children("i").css({
					'background-image': "url(img/leftJia.png)"
				});
				//console.log(p);
				e.parent().siblings().children('a').removeClass("current");
				//var p=parseInt(e.parent().siblings().children('a').attr("title"))+1;
				var p = parseInt(e.parent().siblings().children('a').attr("title"));
				if (p % 2 == 0) {
					p++;
				} else if (p % 2 == 1) {
					p = p;
				}
				e.parent().siblings().children('a').attr('title', p);
				//console.log(e.parent().children("li").children("ul"));
			} else if (h % 2 == 0) {
				e.children('i').css({
					'background-image': "url(img/leftJia.png)"
				});
				e.removeClass("current");

			}
		}

		// function sum2(e, s) {
		// 	e.attr("title", parseInt(e.attr('title')) + 1);
		// 	e.parent().siblings().children('a').removeClass("current");
		// 	e.addClass("current");
		// 	e.parent().children("ul").toggle(500);
		// 	if (s % 2 == 1) {
		// 		e.children('i').css({
		// 			'background-image': "url(img/leftJian.png)"
		// 		});
		// 		e.addClass("current");
		// 	} else if (s % 2 == 0) {
		// 		e.children('i').css({
		// 			'background-image': "url(img/leftJia.png)"
		// 		});
		// 		e.removeClass("current");
		// 	}
		// 	//e.parent().children().children("ul").hide();
		// }
	</script>
</html>
